<template>
  <div v-show="canShow">
    <!-- 充值成功弹窗 -->
    <div class="RechargeSuccessful" v-if="RechargeSuccessful">
      <div class="RechargeSuccessful_bg">
        <div class="RechargeSuccessful_content">
          <div class="RechargeSuccessful_close"><i class="el-icon-close" @click="closeWindow"></i></div>
          <div class="RechargeSuccessful_content_icon"><i class="el-icon-check"></i></div>
          <div class="RechargeSuccessful_content_title">恭喜您！支付成功！</div>
        </div>
      </div>
    </div>

    <!-- 充值弹窗 -->
    <div class="rechargepoints" v-show="!RechargeSuccessful">
      <div class="rechargepoints_bg">
        <div class="rechargepoints_content">
          <div class="rechargepoints_content_bg"><img src="@a/img/bg28.jpg"/></div>
          <div class="rechargepoints_content_left">
            <div class="content_left_title">AI创作平台</div>
            <div class="content_left_txt">
            </div>
          </div>
          <div class="rechargepoints_content_right" style="display: flex">
            <div v-for="(item, index) in products" style="width: 100px;height:600px;border: 1px solid beige">
              <div>
                <el-tag>{{ item.name }}</el-tag>
              </div>
              <div style="margin-top: 100px">
                <el-button v-if="item.can_new" type="danger" @click="buy(item.id)">购买</el-button>
              </div>
            </div>

            <div v-if="showPay" style="display: flex;">
              <div style="width: 50%">
                <img :src="qrcode" alt="">
              </div>
             <div style="width: 50%">
               <div>企业微信支付</div>
               <div>订单备注： {{order_num}}</div>
             </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MySwiper from "@c/common/mySwiper/mySwiper";
import {Loading} from 'element-ui';
import {api} from "@/api-js";

export default {
  name: "addNewRobot",
  data() {
    return {
      canShow: true,
      amoney: '',
      aintegral: '',
      describe: '',
      images: '',
      RechargeSuccessful: false,
      interval: null,
      rechargeList: [],
      default_index: 0,
      can_swiper: false,
      reward_points: 0,
      loadingInstance: null,

      products: [],
      showPay: false,
      order_num: '',
      qrcode: '',

    };
  },
  components: {
    MySwiper
  },
  methods: {
    async buy(id) {
      const [e, r] = await api.newOrders.add(id)
      if (!e && r) {
        let order_id = r.result.order_id
        const [e1, r1] = await api.newOrders.getQrCode(order_id)
        if(!e1 && r1) {
          this.qrcode = r1.result.qrcode
          this.order_num = r1.result.order_num
          this.showPay = true
          this.products = []
          this.interval = setInterval( async() => {
            const [e2, r2] = await api.newOrders.isOrderPayed(order_id);
            if(!e2 && r2) {
              if(r2.result.is_payed) {
                this.showPay = false
                this.RechargeSuccessful = true
                clearInterval(this.interval)
              }
            }
          }, 2000)
        }
      }
    },
    openProtocol() {
      window.open('https://www.ai-dog.net/serviceAgreement.html', '_blank');
    },
    handleChildClick(money, integral, images, reward_points, describe) {
      this.amoney = money
      this.aintegral = integral
      this.images = images
      this.reward_points = reward_points
      this.describe = describe
    },
    closeWindow() {
      let that = this;

      clearInterval(that.interval)
      that.$emit('close')
    },
    async getProductList() {
      const [e, r] = await api.robotProducts.list(0)
      if (!e && r) {
        this.products = r.result
      }
    }
  },
  created() {
    // this.loadingInstance = Loading.service({});
    this.getProductList()


  }
}
</script>

<style scoped>
@import "addNewRobot.css";
</style>
